<template>
	<view>
		<uni-forms ref="form" :modelValue="podinformerDate" label-width="80px" border label-align="right">
			<uni-forms-item label="選擇環境" required>
				<uni-data-select v-model="podinformerDate.env" label-width="30px" :localdata="selectData.env"
					@change="change_select_env"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="命名空間" required>
				<uni-data-select v-model="podinformerDate.namespace" :localdata="selectData.namespace"
					@change="change_select"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="更新時間">
				<uni-data-select v-model="podinformerDate.maxAge" :localdata="selectData.maxAge"
					@change="change_select"></uni-data-select>
			</uni-forms-item>

			<uni-forms-item label="自动刷新">
				<uni-data-select v-model="refreshTime" :localdata="refreshOptions"
					@change="onRefreshChange"></uni-data-select>
			</uni-forms-item>
			<!-- <text>当前刷新间隔：{{ refreshTime }} 秒</text> -->
		</uni-forms>

		<!-- 下拉框选择刷新时间 -->
		<!-- <picker @change="onRefreshChange" :value="refreshTime" :range="refreshOptions">
			<view class="picker">
				刷新频率：{{ refreshTime }}
			</view>
		</picker> -->



		<view class="uni-container">
			<uni-table ref="table" :loading="false" border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th width="430px" align="center" filter-type="search" :filter-data="tableData" sortable
						@filter-change="filterChange" @sort-change="sortChangeName">name</uni-th>
					<uni-th align="center">ready</uni-th>
					<uni-th align="center">status</uni-th>
					<uni-th align="center">restarts</uni-th>
					<uni-th align="center" sortable @sort-change="sortChangeAge">age</uni-th>
					<uni-th align="center">node</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in sortedData" :key="index">
					<uni-td>{{ item.name }}</uni-td>
					<uni-td align="center">{{ item.ready }}</uni-td>
					<uni-td align="center">{{ item.status }}</uni-td>
					<uni-td align="center">{{ item.restarts }}</uni-td>
					<uni-td>{{ item.age }}</uni-td>
					<uni-td>{{ item.node }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
	</view>
	<button @click="getTableData">刷新</button>
	<!-- <button @click="sortChangeName({order: 'ascending'})">name字段排序</button> -->
</template>


<script>
	export default {
		data() {
			return {
				tableData: [],
				apiUrl: "",
				// 下拉框數據源
				selectData: {
					namespace: [{
						text: 'pro',
						value: 'pro',
						disable: false
					}, {
						text: 'test-r',
						value: 'test-r',
						disable: true
					}, {
						text: 'test-s',
						value: 'test-s',
						disable: true
					}, {
						text: 'dev-r',
						value: 'dev-r',
						disable: true
					}, {
						text: 'dev-s',
						value: 'dev-s',
						disable: true
					}],
					env: [{
						text: 'local',
						value: 'local'
					}, {
						text: 'pro',
						value: 'pro'
					}],
					maxAge: [{
						"value": 5,
						"text": "5",
					}, {
						"value": 15,
						"text": "15"
					}, {
						"value": 30,
						"text": "30"
					}, {
						"value": 60,
						"text": "60"
					}, {
						"value": 0,
						"text": "-"
					}],
				},
				// 請求 podInformer 接口的 query 參數
				podinformerDate: {
					env: "pro",
					namespace: "pro",
					maxAge: 60
				},
				// 排序字段和顺序
				sortKey: '', // 当前排序字段
				sortOrder: '', // asc | desc
				// 定时器
				timer: null,
				refreshTime: '8000', // 当前刷新时间（毫秒）
				refreshIndex: 0, // 下拉框选中索引
				refreshOptions: [{
					text: '5秒',
					value: '5000'
				}, {
					text: '8秒',
					value: '8000'
				}, {
					text: '10秒',
					value: '10000'
				}, {
					text: '15秒',
					value: '15000'
				}, {
					text: '30秒',
					value: '30000'
				}],
			}
		},
		onLoad() {
			// 页面加载时启动默认定时器（5秒一次）
			this.restartTimer()
		},
		onUnload() {
			// 页面卸载时清除定时器
			if (this.timer) {
				clearInterval(this.timer)
				this.timer = null
			}
		},
		computed: {
			// 根据排序信息返回排序后的数据
			sortedData() {
				const {
					sortKey,
					sortOrder
				} = this
				if (!sortKey || !sortOrder) return this.tableData

				return this.tableData.slice().sort((a, b) => {
					const res = a[sortKey] < b[sortKey] ? -1 : a[sortKey] > b[sortKey] ? 1 : 0
					// console.log("rrrrreeeessss:", res)
					return sortOrder === 'asc' ? res : -res
				})
			}
		},
		methods: {
			getTableData() {
				uni.request({
					// url: 'https://ops.edccmss.cn/api-go/v1/public/clientGo/podinformer',
					url: this.apiUrl + '/api-go/v1/public/clientGo/podinformer',
					method: 'GET',
					data: this.podinformerDate,
					// sslVerify: false,
					success: (res) => {
						console.log("res.data: ", res.data)
						if (res.data.data != null) {
							this.tableData = res.data.data
						} else {
							this.tableData = []
						}
						this.sortChangeName({
							order: 'ascending'
						})
					},
					fail: (res) => {
						console.log(res.errMsg)
					},
					complete: (res) => {
						console.log('complete')
					}
				});
			},
			// 篩選時觸發事件
			filterChange(e) {
				console.log("filterChange:", e)
			},
			// 排序時觸發事件 name 字段
			sortChangeName(e) {
				console.log("sortChange:", e)
				const {
					order
				} = e
				this.sortKey = 'name'
				this.sortOrder = order === 'ascending' ? 'asc' : order === 'descending' ? 'desc' : ''

				console.log('排序字段:', this.sortKey, '排序顺序:', this.sortOrder)

				// 触发数据重新计算（computed 会自动响应）
			},
			// 排序時觸發事件 age 字段
			sortChangeAge(e) {
				console.log("sortChange:", e)
				const {
					order
				} = e
				this.sortKey = 'age'
				this.sortOrder = order === 'ascending' ? 'asc' : order === 'descending' ? 'desc' : ''

				console.log('排序字段:', this.sortKey, '排序顺序:', this.sortOrder)

				// 触发数据重新计算（computed 会自动响应）
			},
			// 命名空間下拉框 change 事件
			change_select(e) {
				// console.log("change_select:", e)
				this.getTableData()
			},
			// 環境下拉框 change 事件
			change_select_env(e) {
				// console.log("change_select_env:", e)

				if (e === "pro") {
					this.podinformerDate.namespace = "pro"
					this.getTableData()
					for (var index = 0; index < this.selectData.namespace.length; index++) {
						var element = this.selectData.namespace[index];
						if (element.value != "pro") {
							this.selectData.namespace[index].disable = true
						} else {
							this.selectData.namespace[index].disable = false
						}
					}
				} else if (e === "local") {
					this.podinformerDate.namespace = "test-r"
					this.getTableData()
					for (var index = 0; index < this.selectData.namespace.length; index++) {
						var element = this.selectData.namespace[index];
						if (element.value === "pro") {
							this.selectData.namespace[index].disable = true
						} else {
							this.selectData.namespace[index].disable = false
						}
					}
				}
			},
			// 启动定时器
			startTimer() {
				if (this.timer) {
					clearInterval(this.timer)
					this.timer = null
				}

				this.timer = setInterval(() => {
					this.getTableData()
				}, this.refreshTime)
			},
			// 重启定时器
			restartTimer() {
				if (this.timer) {
					clearInterval(this.timer)
					this.timer = null
				}
				this.startTimer()
			},
			// 定时器更新时间
			onRefreshChange(e) {
				this.refreshTime = e
				this.restartTimer()
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					// console.log("res.platform", res.platform)
					if (res.platform != 'windows') {
						// console.log("不是h5", this.apiUrl)
						this.apiUrl = 'https://ops.edccmss.cn'
						// this.apiUrl = 'http://localhost'
					}
				},
				fail: (res) => {
					console.log(res.errMsg)
				},
				complete: (res) => {
					console.log('complete')
				}
			});
			this.getTableData();
		}
	}
</script>

<style>
	.content {
		padding: 20px;
	}

	.picker {
		border: 1px solid #ccc;
		padding: 10px;
		margin-bottom: 20px;
	}
</style>